<template>
	<view>
		<u-navbar titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="填写退货信息" :autoBack="true">
		</u-navbar>
		<view class="padding32">
			<view class="flexJBC" style="border-bottom: 1rpx solid rgba(51, 51, 51, 0.06);padding-bottom: 24rpx;">
				<view class="fontS32">
					快递单号：
				</view>
				<view class="" style="flex: 1;">
					<u-input fontSize='32rpx' color="#333" inputAlign='right'
						placeholderStyle="color:#999;fontSize:32rpx" placeholder="请填写快递单号" border="none"
						v-model="delivery_id" ></u-input>
				</view>
			</view>
			<view class="flexJBC mt24">
				<view class="fontS32">
					物流公司：
				</view>
				<view class="fontS32" style="flex: 1;text-align: right;" :class="wuliu?'co3':'co9'" @click="showwuliu=true">
					{{wuliu?wuliuArray[wuliu].company_name:'请填写物流公司'}}
					<!-- <u-input fontSize='32rpx' color="#333" inputAlign='right'
						placeholderStyle="color:#999;fontSize:32rpx" placeholder="请填写物流公司" border="none" v-model="delivery_type"></u-input> -->
				</view>
			</view>
			<view class="fixed btnbox">
				<u-button :loading='loading' class="bgcred cof fontS32 fixed" @click="deliver" shape='circle'>
					确定
				</u-button>
			</view>

		</view>
		<!-- 物流公司 -->
		<u-popup :show="showwuliu" @close="showwuliu=false" round='20rpx' mode="bottom" customStyle='height:60vh;overflown:hidden' >
			<view class="padding32">
				<view class="center fontS40">
					快递
				</view>
				<u-radio-group @change="showwuliu=false" v-model="wuliu" iconPlacement="right">
					<u-radio activeColor="red" :label="item.company_name" :name="index" labelSize='32rpx'
						v-for="(item,index) in wuliuArray" :key="index"></u-radio>
				</u-radio-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showwuliu:false,
				wuliuArray:[],
				wuliu:'',//物流index
				refund_id:'',
				loading: false,
				delivery_id: '', //单号
			}
		},
		onLoad(option) {
			if(option && option.refund_id){
				this.refund_id=option.refund_id
			}
			this.$my.post('/index/com/getCourierCompany').then(res => {
			
				if (res.code == 200) {
					this.wuliuArray=res.data
				}
			})
		},
		methods: {
			deliver() {
				if (!this.wuliu || !this.delivery_id) {
					this.$my.toast('请先完成表单')
				} else {
					this.loading = true;
					this.$my.post('/index/refund/order/deliver', {
						refund_id: this.refund_id,
						delivery_id: this.delivery_id,
						delivery_type:this.wuliuArray[this.wuliu].id,
					}).then(res => {
						this.loading = false;
						this.$my.toast(res.message)
						if (res.code == 200) {
							this.$my.go('', 500)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	/deep/ .u-radio-label--right {
		width: 100%;
		padding: 26rpx 0;
		box-sizing: border-box;
		border-bottom: 2rpx solid rgba(51, 51, 51, 0.06)
	}
	
	/deep/ .u-radio-label--right:last-of-type {
		border-bottom: none
	}
	
	/deep/ .u-radio-group--row {
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.btnbox {
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
		height: 80rpx;

		// width: ;

	}
</style>
